{% extends 'base.html' %}
{% load static %}
{% load user_filter %}
{% block title %}权限管理{% endblock %}
{% block custome_css %}{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-3">

            <div class="card">
                <div class="card-header"><h4>角色列表</h4></div>
                <div class="card-body">
                    <div class="list-group">
                        {% for role in p_objs %}
                            <a href="#!" onclick="show_obj({{ role.id }});" class="list-group-item" id="role{{ role.id }}">{{ role.name }}<span class="badge">{{ role.user_count }}</span></a>
                        {% endfor %}
                    </div>
                </div>
            </div>

        </div>

        <div class="col-md-9">

            <div class="card">
                <div class="card-header">
                    <h4>数据授权</h4>
                    <ul class="card-actions">
                        <li>
                            {% if request|has_permission:'save' %}
                                <button class="btn btn-lg" type="button" data-toggle="tooltip" onclick="save_data()" title="保存数据授权"><i class="mdi mdi-content-save "></i></button>
                            {% endif %}
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <form action="{% url 'systems:per_save_data' %}" method="post" id="form-save-data">
                        <input class="form-control" type="hidden" name="role" placeholder="角色" id="role_id_data">
                        <div class="row">
                            <div class="col-sm-4 col-xs-12">
                                <select class="form-control select2 w-100" name="data_range" id="data_range" onchange="show_dept(this.value)">
                                    <option></option>
                                    <option value="0">仅本人数据权限</option>
                                    <option value="1">本部门数据权限</option>
                                    <option value="2">本部门及以下数据权限</option>
                                    <option value="3">全部数据权限</option>
                                    <option value="4">自定义数据权限</option>
                                </select>
                            </div>
                            <div class="col-sm-8 col-xs-12">
                                <div class="table-responsive">
                                    <table class="table table-permission" id="table-dept" style="display: none;">
                                        <tbody>

                                        {{ p_depts|safe }}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {% csrf_token %}
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h4>菜单授权</h4>
                    <ul class="card-actions">
                        <li>
                            {% if request|has_permission:'save' %}
                                <button class="btn btn-lg" type="button" data-toggle="tooltip" onclick="save_menu()" title="保存菜单授权"><i class="mdi mdi-content-save "></i></button>
                            {% endif %}
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <form action="{% url 'systems:per_save_menu' %}" method="post" id="form-save-menu">
                        <input class="form-control" type="hidden" name="role" placeholder="角色" id="role_id_menu">
                        <div class="table-responsive">
                            <table class="table table-permission">
                                <thead>
                                <tr>
                                    <th>
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input name="checkbox" type="checkbox" id="check-all">
                                            <span> 全选</span>
                                        </label>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                {{ p_menus|safe }}

                                </tbody>
                            </table>
                        </div>
                        {% csrf_token %}
                    </form>

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block custome_js %}
    <script>
        function show_dept(i_data_range) {
            if (i_data_range === 4 || i_data_range === '4'){
                document.getElementById("table-dept").style.display = '';
            }
            else {
                document.getElementById("table-dept").style.display = 'none';
            }
        }

        function show_obj(i_id) {
            var arr = document.getElementsByClassName("list-group-item");
            for (k=0;k<arr.length;k++){
                if (arr[k].id === 'role'+i_id){
                    arr[k].classList.add("active");
                }
                else {
                    arr[k].classList.remove("active");
                }
            }
            $("#role_id_data").val(i_id);
            $("#role_id_menu").val(i_id);
            $.ajax({
                type: "GET",
                url: '{% url 'systems:per_detail' %}',
                data: {'id': i_id},
                success: function(callback){
                    // 复选框全消
                    $("input[type='checkbox']").prop('checked', false);
                    if (callback.code === "200") {
                        var role=JSON.parse(callback.h_obj);
                        var depts=JSON.parse(callback.h_depts);
                        var menus=JSON.parse(callback.h_menus);
                        var buttons=JSON.parse(callback.h_buttons);
                        //console.log(role.data_range);
                        //console.log(menus);
                        //console.log(buttons);
                        $("#data_range").val(role.data_range);
                        show_dept(role.data_range);
                        for (i=0;i<depts.length;i++) {
                            var chk_dept = $('#dept'+ depts[i].pk +'');
                            chk_dept.prop('checked', true);
                        }
                        for (i=0;i<menus.length;i++){
                            var chk_menu = $('#menu'+ menus[i].pk +'');
                            chk_menu.prop('checked', true);
                            for (j=0;j<buttons.length;j++){
                                if (buttons[j].fields.menu == menus[i].pk){
                                    var chk_button = $('#button'+ buttons[j].pk +'');
                                    chk_button.prop('checked', true);
                                }
                            }
                        }
                    } else {
                        $.alert(callback.msg);
                    }
                },
                error: function(){
                    lightyear.notify('系统异常', 'warning', 100);
                }
            })
        }

        function save_data() {
            lightyear.loading('show');  // 显示
            var form = $('#form-save-data');
            if(form.length > 0){
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: new FormData(form[0]),  // 为了兼容数据和文件均能正常提交，将data从form.serialize()更改为form_data
                    processData: false,                     // 告诉jQuery不要去处理发送的数据
                    contentType: false,                     // 告诉jQuery不要去设置Content-Type请求头
                    success: function (resp) {
                        if (resp.code === "200") {
                            show_obj($("#role_id_data").val())
                            lightyear.notify(resp.msg, 'success', 100);
                        } else {
                            $.alert(resp.msg);
                        }
                    },
                    error: function () {
                        lightyear.notify('系统异常', 'warning', 100);
                    }
                });
            }
            lightyear.loading('hide');  // 隐藏
        }

        function save_menu() {
            lightyear.loading('show');  // 显示
            var form = $('#form-save-menu');
            if(form.length > 0){
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: new FormData(form[0]),  // 为了兼容数据和文件均能正常提交，将data从form.serialize()更改为form_data
                    processData: false,                     // 告诉jQuery不要去处理发送的数据
                    contentType: false,                     // 告诉jQuery不要去设置Content-Type请求头
                    success: function (resp) {
                        if (resp.code === "200") {
                            show_obj($("#role_id_menu").val())
                            lightyear.notify(resp.msg, 'success', 100);
                        } else {
                            $.alert(resp.msg);
                        }
                    },
                    error: function () {
                        lightyear.notify('系统异常', 'warning', 100);
                    }
                });
            }
            lightyear.loading('hide');  // 隐藏
        }

    </script>
    <script type="text/javascript">
        $(function(){
            //动态选择框，上下级选中状态变化
            $('input.checkbox-parent').on('change', function(){
                var dataid = $(this).attr("dataid");
                $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
            });
            $('input.checkbox-child').on('change', function(){
                var dataid = $(this).attr("dataid");
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                var parent = $('input[dataid=' + dataid + ']');
                if($(this).is(':checked')){
                    parent.prop('checked', true);
                    //循环到顶级
                    while(dataid.lastIndexOf("-") != 2){
                        dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                        parent = $('input[dataid=' + dataid + ']');
                        parent.prop('checked', true);
                    }
                }else{
                    //父级
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                        //循环到顶级
                        while(dataid.lastIndexOf("-") != 2){
                            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                            parent = $('input[dataid=' + dataid + ']');
                            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                                parent.prop('checked', false);
                            }
                        }
                    }
                }
            });
        });
    </script>
{% endblock %}
